<template>
	<div>
		<!--网页内容-->
		<div class='container'>
			<h2>作品修改</h2>
			<form name='upload' action="/upload" method="post" enctype="multipart/form-data" id="basciForm">
				<table>

					<tr>
						<td>作品名称：</td>
						<td>
							<input type='text' class='text' name='proName' placeholder="请输入作品的名称" v-model='title
'></td>
						<td></td>
					</tr>

					<tr>
						<td>作品类型：</td>
						<td>
							<select id="proType" v-model='column'>
								<option value="1">新媒体</option>
								<option value="2">游戏</option>
								<option value="3">动漫</option>
							</select>
						</td>
						<td></td>
					</tr>

					<tr>
						<td>团队/个人名称：</td>
						<td>
							<input type='text' class='text' name='proAuthor' placeholder="请输入作者的大名" v-model='author
'></td>
						<td></td>
					</tr>

					<tr class='proIntro'>
						<td>作品介绍：</td>
						<td>
							<span style="vertical-align:99px"></span>
							<textarea type='textarea' class='intorPro' name='proIntro' style="resize:none" placeholder="请输入作品的介绍" v-model='intro
'></textarea>
						</td>
						<td></td>
					</tr>
				</table>
			</form>


			<table>
				<tr class='upload_tr'>
					<td>
						展示图片上传：
					</td>
					<td>
						<div class='upload_btn'>
							<div id="preview_showImg" v-for='item in showImgUrl' class='preview' v-show='true'>
								<img v-bind:src=item>
							</div>
							<a class="btn" @click="toggleShow1" href='javascript:void(0)'>上传图片</a>
							<my-upload @crop-success="cropSuccess" @crop-upload-success="upload_show_img" @crop-upload-fail="cropUploadFail" v-model="show1"
								:width="800" url="/pro/upload_pro_img" :params="params" :headers="headers" img-format="png" field="show" ki="1">
								</my-upload>
						</div>
					</td>
					<td></td>
				</tr>
			</table>



			<table>
				<tr class='upload_tr'>
					<td>
						封面图片上传：
					</td>
					<td>
						<div id="preview_coverImg" class='preview' v-show='computedCoverImg'>
							<img v-bind:src=coverUrl>
						</div>
						<a class="btn" @click="toggleShow2" href='javascript:void(0)'>上传图片</a>
						<my-upload @crop-success="cropSuccess" @crop-upload-success="upload_cover_img" @crop-upload-fail="cropUploadFail" v-model="show2"
							:width="200" :height="180" url="/pro/upload_cover_img" :params="params" :headers="headers" img-format="png" field="cover"
							ki="2">
							</my-upload>
					</td>
				</tr>
			</table>


			<form id='videoForm' action="/pro/publish" method="patch" name='upload'>
				<table>
					<tr class='upload_tr'>
						<td>
							展示视频上传：
						</td>
						<td>
							<div id="preview_coverImg" class='preview' v-show='computedvideoImg'>
								<video :src="videoUrl" controls></video>
							</div>
							<input id="file" type="file" name="video" />
							<button id="upload_video" type="button" @click='uploadVideo'>upload</button>

						</td>
					</tr>
				</table>
			</form>


			<p>{{warning}}</p>
			<button value='提交' id='basciFormBtn' class='editSubmit' @click='upload'>提交</button>



		</div>

	</div>
</template>

<script>
	import $ from "jquery";
	import myUpload from 'vue-image-crop-upload/upload-2.vue';

	import 'babel-polyfill'; // es6 shim
	export default {
		name: 'footer',
		created() {
			// require('../../assets/js/upload.js')($);
			// require('../../assets/js/webuploader.min.js')($);
			this.$store.dispatch({
                type: "getAndDelMethod",
                method: "get",
                url: '/api/pro/' + this.$route.query._id,
                callback: (result) => {
                    this.title = result.body.data.title;
                    this.author = result.body.data.author;
                    this.intro = result.body.data.intro;
                    this.coverImg_url = result.body.data.coverImg_url;
                    this.img_url = result.body.data.img_url;
                    this.video_url = result.body.data.video_url;
				}
			})

		},
		data() {
			return {
				show1: false,
				show2: false,
				coverImg: false,
				showImg: false,
				videoShow: false,
				field: 'img',
				params: {

				},
				headers: {

				},
				imgDataUrl: '',
				title: '',
				author: '',
				column: '',
				intro: '',
				jsonData: '',
				uid: '',
				coverImg_url: '',
				img_url: [],
				video_url: '',
				warning: '',
				ip: this.$store.state.ip,
			}
		},
		computed: {
			coverUrl() {
				return this.$store.state.ip + this.coverImg_url;
			},
			showImgUrl() {
				let imgArr = [];
				for (let i = 0; i < this.img_url.length; i++) {
					imgArr.push(this.$store.state.ip + this.img_url[i]);
				}
				console.log(imgArr)
				return imgArr;
			},
			videoUrl() {
				return this.$store.state.ip + this.video_url;
			},
			//图片预览显示与否
			computedShowImg() {
				if (this.img_url.length !== 0) {
					this.showImg = true;
				}
				return this.showImg;
			},
			computedCoverImg() {
				if (this.coverImg_url !== '') {
					this.videoShow = true;
				}
				return this.videoShow;
			},
			computedvideoImg() {
				if (this.video_url !== '') {
					this.videoImg = true;
				}
				return this.videoImg;
			},

		},
		components: {
			'my-upload': myUpload
		},
		methods: {
			toggleShow1() {
				this.show1 = !this.show1;
			},

			toggleShow2() {
				this.show2 = !this.show2;

			},

			cropSuccess(imgDataUrl, field) {
				console.log('-------- crop success --------');
				this.imgDataUrl = imgDataUrl;
			},

			upload_show_img(jsonData, field) {
				this.flag = true;

				//this.img_url.push(jsonData.data);
				this.img_url.push(jsonData.data);
			},
			upload_cover_img(jsonData, field) {
				this.flag = true;

				this.coverImg_url = jsonData.data;

			},
			uploadVideo() {
				var that = this;
				$.ajax({
					url: '/pro/upload_video',
					type: 'POST',
					cache: false,
					data: new FormData($('#videoForm')[0]),
					processData: false,
					contentType: false
				}).done(function (res) {
					that.video_url = res.data;
				}).fail(function (res) { });
			},

			cropUploadFail(status, field) {
				console.log('-------- upload fail --------');
				console.log(status);
				console.log('field: ' + field);
			},

			//用户注册
			validateUpload() {
				if (!/^.{1,20}$/.test(this.title)) {
					this.warning1 = '作品标题长度为1-20位';
					return false;
				}
				if (!/^.{1,20}$/.test(this.author)) {
					this.warning1 = "作者长度为1-20位";
					return false;
				}
				// if ((this.author) {
				// 	this.warning1 = "作者长度为1-20位";
				// 	return false;
				// }
				this.warning1 = "";
				return true;
			},

			upload() {
				// if (this.validateupload()) {
				this.$store.dispatch({
					type: "httpMethod",
					method: "patch",
					url: "/api/pro/" + this.$route.query._id,
					data: {
						title: this.title,
						uid: this.$store.state.userInfo._id,
						author: this.author,
						column: this.column,
						intro: this.intro,
						coverImg_url: this.coverImg_url,
						img_url: this.img_url,
						video_url: this.video_url,
					},
					callback: (result) => {
						if (result.body.status == "ok") {
							this.warning = '上传成功'
							this.$router.push({
								path: '/detail',
								query: {
									_id: result.body.data._id,
								}
							});
						} else if (result.body.status == "fail") {
							this.warning2 = "用户名已存在"
						}
					}

				});
			},
		}
	}

</script>



<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import '../../assets/css/upload.css';
</style>